<template>
  <div id="app">
    <tab-bar class="tab-bar" :tabbar-item="['推荐音乐','热歌榜','搜索']" @tabbarItemClick="tabbarItemClick"></tab-bar>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import TabBar from "@/components/tabbar/TabBar";
export default {
  components: {
    TabBar,
  },
  methods: {
    tabbarItemClick(index) {
      switch (index) {
        case 0: {
          if (this.$route.path != "/recommond") {
            this.$router.push("/recommond");
          }
          break;
        }
        case 1: {
          if (this.$route.path != "/hotmusic") {
            this.$router.push("/hotmusic");
          }
          break;
        }
        case 2: {
          if (this.$route.path != "/search") {
            this.$router.push("/search");
          }
          break;
        }
      }
    },
  },
};
</script>

<style>
@import url("~@/assets/css/base.css");
.tab-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  box-sizing: border-box;
}
</style>
